<template>
  <div>

    <myheader></myheader>

		<div id="carousel" class="carousel slide" data-ride="carousel">


			<div class="carousel-inner">

				<!--Text only with background image-->
				<div class="carousel-inner">

				<!--Text only with background image-->
				<div class="carousel-item active">


					<!--轮播图-->

					<Carousel @change="changeimg" @click="clickimg" pageTheme="circle" :datas="imgs"></Carousel>


				</div>



			</div>
		</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>

		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>

		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品列表</h3>
				<div class="row">
					<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img class="rounded-corners img-fluid" :src="src+item.img"	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://127.0.0.1:8080/item?id='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">${{item.price}}</span></p>
					</div>
          <br>

          <!--自主分页-->
          <div>
            <a @click="getdata(1)">首页</a>
            <button @click="getdata(lastpage)" v-show="lastpage">上一页</button>
            <!--<ul>-->
              <!--<li v-for="index in all">-->
                <!--<a @click="getdata(index)">{{ index }}</a>-->
              <!--</li>-->
            <!--</ul>-->

            <!--分页偏移-->
            <span v-for="item in last_page">
              <a @click="getdata(item)">{{ item }}</a>
            </span>
            <a @click="getdata(page)">当前页：{{page}}</a>
            <span v-for="item in next_page">
              <a @click="getdata(item)">{{ item }}</a>
            </span>

            <button @click="getdata(nextpage)" v-show="nextpage">下一页</button>
            <a @click="getdata(all)">尾页</a>

            <input @input="jump_page($event)" type="text">
          </div>
          <br>

          <!--分页器分页-->
          <div>
            <!--<Pagination layout="pager, small jumper" @change="get_goods" v-model="pagination"></Pagination>-->
            <Pagination  @click="get_goods" v-model="pagination"></Pagination>
          </div>

				</div>
			</div>
		</section>

		<div class="divider"></div>

		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>

		</section>


    <mytail></mytail>

  </div>

</template>



<script>
import myheader from './myheader'
import mytail from './mytail'
// import Pagination from "heyui/lib";

export default {
  data () {
    return {
        // // 自主分页
        total:5, //商品总数
        page:1,//当前页
        all:0,//总页数
        lastpage:0,//上一页
        nextpage:0,//下一页
        size:1, //每页显示数量
        //分页偏移
        last_page:[],
        next_page:[],
        //按字段排序
        coloum:'id',  //排序字段
        order:'-', //排序方案

        //分页器变量
        pagination:{
          //当前页
          page:1,
          size:1,
          totol:4,
        },

        //商品列表
        goodslist:[],

        src:'http://127.0.0.1:8000/static/upload/',

        msg: "这是一个变量",
        //轮播图图片
        imgs: [

          {
            title: '广告活动页',
            link: 'http://www.baidu.com',
            image: 'http://localhost:8080/static/img/placeholder-jacket.f5996c6.png'
          },
          {
            title: '促销活动页',
            link: 'http://www.163.com',
            image: 'http://localhost:8080/static/img/placeholder-product.1011f1b.jpg'
          }

        ]
        }
      },
        //注册组件标签
      components:{
          'myheader': myheader,
          'mytail': mytail,
          // Pagination,
      },

  mounted:function(){
    this.change_back();

  	this.get_carousel();

  	this.get_goods();

  	this.getdata(1);


},
  methods:{
    //分页跳转
    jump_page:function(e){
      let val = e.target.value;

      if(val > this.all){
        this.$Message('您输入的页码有误');
        // alert('页码错误')
        return false;
      }
      console.log(val)
    },

    //自主分页接口
    getdata:function(page){ // page页码

      //分页手动赋值
      this.page=page;

      // 发送请求
        this.axios.get(
          'http://127.0.0.1:8000/goodslist/',{params:{page:page,size:this.size, coloum:this.coloum, order:this.order}}).then(res=>{
            console.log(res);
            this.goodslist = res.data.data;

            //商品总数
            this.total = res.data.total;

            //判断上一页
            if(page === 1){
              this.lastpage = 0
            }else {
              this.lastpage = page - 1;
            }

            //计算总页数  Math.ceil向上取整
            this.all = Math.ceil(res.data.total / this.size);

            //判断下一页
            if(page === this.all){
              this.nextpage = 0;
            }else {
              this.nextpage = page + 1;
            }



            //设置偏移量
            let move_page = 2;

            var my_last = [];
            //计算左侧偏移量
            for (let i=page - move_page; i<page; i++){
              if(i>0){
                my_last.push(i);
              }
            }

            var my_next = [];
            //计算右侧偏移量
            for (let i=page + 1; i<=page+move_page; i++){
              if(i<=this.all){
                my_next.push(i);
              }
            }
            console.log(my_last);
            console.log(my_next);

            this.last_page = my_last;
            this.next_page = my_next;
        });
    },

    //获取商品
    get_goods: function () {

          //发送请求
          this.axios.get('http://localhost:8000/goodslist/', {params:{page:this.pagination.page, size:this.pagination.size}}).then((result) => {
            // console.log(result)
            this.goodslist = result.data.data;

            this.pagination.total = result.data.totol;
          });

        },


    //切换主题颜色
  	change_back:function(){

  		//获取样式表
  		var styles = getComputedStyle(document.documentElement);

  		//动态更改
  		document.documentElement.style.setProperty("--bg-color","#292a2d");

  		//字体颜色
  		document.documentElement.style.setProperty("--a-color","white");

  	},
  	//获取轮播图接口
  	get_carousel:function(){

  		//发送请求
  		this.axios.get('http://localhost:8000/getcarousel/').then((result) =>{

  			console.log(result);

  			var mylist = [];

  			//遍历数组
  			for(let i=0,l=result.data.length;i<l;i++){

  					mylist.push({title:result.data[i].name,link:result.data[i].src,image:result.data[i].img});

  			}

  			this.img = mylist;

  		});

  	},
  	//点击轮播图
  	clickimg:function(index,data){

  		//alert(data.link);

  		//跳转
  		window.location.href = data.link;

  	},
  	//切换轮播图
  	changeimg:function(index,data){

  		//console.log(data);

  	}

  }
}


</script>

<style>



</style>
